<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>排片页面</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="/css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="/img/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    <!-- Element UI -->
    <!-- 引入样式 -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
    <!-- 引入组件库 -->
    <!--  <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
    <!-- JavaScript files-->
    <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/vendor/jquery/jquery.min.js"></script>
    <script src="/vendor/popper.js/umd/popper.min.js"> </script>
    <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="/vendor/jquery.cookie/jquery.cookie.js"> </script>
    <script src="/vendor/chart.js/Chart.min.js"></script>
    <script src="/vendor/jquery-validation/jquery.validate.min.js"></script>
    <script src="/js/charts-home.js"></script>
    <!-- Main File-->
    <script src="/js/front.js"></script>

    <!-- 入口函数读取公用的header和sidebar -->
    <script>
        $(function() {
                $(".common_header").load('_header.html');
                //$(".common_sidebar").load('_sidebar.html');

            /*今天*/
            var time = new Date();
            var day = ("0" + time.getDate()).slice(-2);
            var month = ("0" + (time.getMonth() + 1)).slice(-2);
            var today = time.getFullYear() + "-" + (month) + "-" + (day);

            $('#startTime').val(today);

            });
    </script>

    <style>
        .col-md-6{
            float:left;
        }

        .img-container{
            width: 60px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="page">
    <!-- 引出公用的header -->
    <div class="common_header">
    </div>



    <div class="page-content d-flex align-items-stretch">
        <!-- 引出公用的sidebar -->
        <nav class="side-navbar common_sidebar">
            <!-- Sidebar Header-->
            <div class="sidebar-header d-flex align-items-center">
                <div class="title">
                    <h1 class="h4">商家名</h1>
                </div>
            </div>
            <!-- Sidebar Navidation Menus--><span class="heading">影院设置</span>
            <ul class="list-unstyled">
                <li id="consoleSidebar" onclick="consoleSidebar()"><a href="index.html"> <i class="icon-home"></i>控制台 </a></li>
                <li class="active"  id="scheduleSidebar" onclick="scheduleSidebar()"><a href="schedule.html"> <i class="icon-padnote"></i>排片 </a></li>
                <li><a href="level.html"> <i class="icon-interface-windows"></i></i>VIP设置</a></li>
                <li> <a href="payment.html"> <i class="icon-screen"></i>收款信息 </a></li>
            </ul><span class="heading">统计与服务</span>
            <ul class="list-unstyled">
                <li> <a href="statistics.html"> <i class="icon-flask"></i>营业额统计 </a></li>
                <li> <a href="#"> <i class="icon-mail"></i> 服务反馈 </a></li>
            </ul>
        </nav>

        <div class="content-inner">
            <header class="page-header">
                <div class="container-fluid">
                    <h2 class="no-margin-bottom">排片页面</h2>
                </div>
            </header>

            <!-- Schedule Section-->
            <section class="dashboard-counts no-padding-bottom">
                <div class="container">
                    <input type="hidden" id="hiddenVlaue_cinema_id" name="hiddenVlaue_cinema_id" value="">
                    <input type="hidden" id="hiddenVlaue_ch_id" name="hiddenVlaue_ch_id" value="">
                    <div class="row" id="Tempcinemas">
                        <div class="col-lg-12">
                            <label>请选择要排片的分院:
                                <select class= id="tempCinema_id" v-model="selectCinemaID" @change="selectChange" >
                                    <option v-bind:value="cinema.cinema_id" v-for="cinema in cinemas">
                                        {{cinema.cinema_name}}
                                    </option>
                                </select>
                            </label>
                        </div>
                        <div class="col-lg-12">
                            <label>请选择要排片的影厅:
                                <select id="tempCh_id" v-model="selectCinemaHallId" @change="selectChange2">
                                    <option v-bind:value="ch.ch_id" v-for="ch in cinemaHalls">
                                        {{ch.ch_name}}
                                    </option>
                                </select>
                            </label>
                        </div>
                    </div>

                    <div class="container-fluid card card-body" id="scheduleMovie">
                    <ul class="nav nav-pills nav-justified">
                        <li class="nav-item">
                            <a class="nav-link" :class="{active:tempShow1}" href="javascript:void(0)" @click="show1">选择影片排片</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" :class="{active:tempShow2}"  href="javascript:void(0)" @click="show2">自填影片排片</a>
                        </li>
                    </ul>
                        <div v-show="tempShow1">
                            <div class="container-fluid" style="margin-top: 5px;">
                                <div class="col-md-6">
                                <form role="form">
                                    <div class="form-group">
                                        <label>选择列表</label>
                                        <select class="form-control" v-model="selectMovieId">
                                            <option v-bind:value="movie" v-for="movie in movies">
                                                {{movie.movie_name}} ({{movie.movie_time}}分钟)
                                            </option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>选择排片日期</label>
                                        <input type="date" name="date" id="startTime" value="" style="height: 30px; float: right" @change="selectDate" v-model="tempDate">
                                    </div>

                                    <div class="form-group">
                                        <label>选择电影开始时间</label>
                                        <input type="time" name="time" id="startTimeMovie" value="" style="height: 30px; float: right" @change="selectMovieTime" v-model="tempMovieTime">
                                        <br>
                                        <label>电影结束时间</label>
                                        <input type="time" name="time" id="endTimeMovie" value="" style="height: 30px; float: right" v-model="tempMovieEndTime" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <input type="button" class="btn btn-primary" @click="confirmScheduleType1" value="确认排片">
                                    </div>
                                </form>
                                </div>
                                <div class="col-md-6" style="border: 1px solid black;">

                                    <table class="table">
                                        <h1>{{tempDate}}</h1>
                                        <thead>
                                        <tr>
                                            <th>片名</th>
                                            <th>开始时间</th>
                                            <th>结束时间</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="movie in moviesByDate">
                                            <td> {{movie.movie_name}}</td>
                                            <td>{{movie.start_time}}</td>
                                            <td>{{movie.end_time}}</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- 插入片子排片 -->
                        <div class="container-fluid" v-show="tempShow2">
                            <div class="container-fluid" style="margin-top: 5px;">
                            <div class="col-md-6">
                                <form role="form">
                                    <div class="form-group">
                                        <label>请输入片名</label>
                                        <input type="text" name="text" id="movie_name" value="" style="height: 30px; float: right"  v-model="movie_name">
                                        <br>
                                        <label>请输入英文片名</label>
                                        <input type="text" name="text" id="movie_englishname" value="" style="height: 30px; float: right"  v-model="movie_englishname">
                                    </div>
                                    <div class="form-group">
                                        <label>请输入演员名</label>
                                        <input type="text" name="text" id="movie_act" value="" style="height: 30px; float: right"  v-model="movie_act">
                                        <br>
                                        <label>请输入电影描述</label>
                                        <input type="text" name="text" id="movie_descr" value="" style="height: 30px; float: right"  v-model="movie_descr">
                                    </div>
                                    <div class="form-group">
                                        <label>请输入电影类型</label>
                                        <input type="text" name="text" id="movie_type" value="" style="height: 30px; float: right"  v-model="movie_type" >
                                        <br>
                                        <label>请输入电影所属国家</label>
                                        <input type="text" name="text" id="movie_country" value="" style="height: 30px; float: right"  v-model="movie_country">
                                    </div>
                                    <div class="form-group">
                                        <label>请输入电影长度(分)</label>
                                        <input type="text" name="text" id="movie_time" value="" style="height: 30px; float: right"  v-model="movie_time" @change="selectMovieTime2">
                                        <br>
                                        <label>请输入电影上映日期</label>
                                        <input type="text" name="text" id="movie_date" value="" style="height: 30px; float: right" v-model="movie_date">
                                        <br>
                                        <label>请输入电影票价(元)</label>
                                        <input type="text" name="text" id="movie_price" value="" style="height: 30px; float: right"  v-model="movie_price">
                                    </div>
                                    <div class="form-group">
                                        <label>选择排片日期</label>
                                        <input type="date" name="date" id="startTime2" value="" style="height: 30px; float: right" @change="selectDate" v-model="tempDate">
                                    </div>

                                    <div class="form-group">
                                        <label>选择电影开始时间</label>
                                        <input type="time" name="time" id="startTimeMovie2" value="" style="height: 30px; float: right" @change="selectMovieTime2" v-model="tempMovieTime2">
                                    </div>
                                    <div class="form-group">
                                        <label>电影结束时间</label>
                                        <input type="time" name="time" id="endTimeMovie2" value="" style="height: 30px; float:right" v-model="tempMovieEndTime2" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <div class="upload">
                                            <div class="img-container">
                                                <img :src="src" alt="user image" class="img-container">
                                            </div>
                                            <input type="file" @change="getFile" href="file" id="file">
                                            <br>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <input type="button" class="btn btn-primary" @click="confirmScheduleType2" value="确认排片">
                                    </div>
                                </form>
                            </div>
                            <div class="col-md-6" style="border: 1px solid black;">

                                <table class="table">
                                    <h1>{{tempDate}}</h1>
                                    <thead>
                                    <tr>
                                        <th>片名</th>
                                        <th>开始时间</th>
                                        <th>结束时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="movie in moviesByDate">
                                        <td> {{movie.movie_name}}</td>
                                        <td>{{movie.start_time}}</td>
                                        <td>{{movie.end_time}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>


            </section>

        </div> <!-- End of content-inner -->
    </div> <!-- End of page-content -->
</div> <!-- End of page -->

</body>
<script>
        var vm1 = new Vue({
        el: '#Tempcinemas',
        data() {
            return {
                selectCinemaID: '',
                selectCinemaHallId: '',
                cinemas: null,
                cinemaHalls: null
            }
        },
        methods: {
            selectChange : function () {
                console.log('您选择了', this.selectCinemaID)
                axios
                    .get('http://localhost:8788/customerbackend/getCinemaHallByCid', {
                        params: { //请求参数
                            cinema_id: this.selectCinemaID
                        }
                    })
                    .then(response => (this.cinemaHalls = response.data)

                    )
                    .catch(function(error) { // 请求失败处理
                        console.log(error);
                    });
            },

            selectChange2 : function () {
                console.log('您选择了', this.selectCinemaHallId)
            }
        },
        mounted() {
            axios
                .get('http://localhost:8788/customerbackend/getAllCinemas', {
                    params: { //请求参数

                    }
                })
                .then(response => (this.cinemas = response.data)

                )
        .catch(function(error) { // 请求失败处理
                console.log(error);
            });
        }
    });




    var vm2 = new Vue({
        el: '#scheduleMovie',
        data:{

            tempShow1:true,
            tempShow2:false,
            movies: null,
            moviesByDate: null,
            selectMovieId: "",
            tempDate: null,
            tempMovieTime: null,
            tempMovieEndTime: null,
            movieTime: null,
            src: '/img/default.png',
            movie_name: null,
            movie_englishname: null,
            movie_act: null,
            movie_descr: null,
            movie_type: null,
            movie_country: null,
            movie_time: null,
            movie_date: null,
            movie_price: null,
            tempMovieTime2: null,
            tempMovieEndTime2: null,
            upPicture: null
        },
        methods:{
            show1 : function(){
                console.log(111);
                if(this.tempShow1 != true) {
                    this.tempShow1 = true
                }
                this.tempShow2 = false;
            },
            show2 : function() {
                if(this.tempShow2 != true) {
                    this.tempShow2 = true
                }
                this.tempShow1 = false;
            },
            selectDate : function() {
                axios
                    .get('http://localhost:8788/customerbackend/getScheduledMovieByDate', {
                        params: { //请求参数
                            db: null,
                            cinema_id: vm1.selectCinemaID,
                            ch_id: vm1.selectCinemaHallId,
                            date: this.tempDate
                        }
                    })
                    .then(response => (this.moviesByDate = response.data)
                    )
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            selectMovieTime : function() {
                console.log('您选择了', this.tempMovieTime)
                console.log('电影长度', this.selectMovieId.movie_time)
                console.log('电影id', this.selectMovieId.movie_id)
                var holder = this.tempMovieTime.split(":");
                var hour = this.selectMovieId.movie_time/60;
                var minute = this.selectMovieId.movie_time%60;
                console.log('temp时', hour)
                console.log('temp分', minute)
                var endHour = Math.floor(hour + parseInt(holder[0]))
                var endMinute = Math.floor(minute + parseInt(holder[1]))
                console.log('temp2时', endHour)
                console.log('temp2分', endMinute)
                if( Math.floor(endMinute/60 >= 1) ) {
                    endMinute = Math.floor(endMinute % 60)
                    endHour += 1
                }
                if(endHour < 10) {
                    endHour = "0" + endHour
                    console.log('方法里', endHour)
                }
                if(endMinute < 10) {
                    endMinute = "0" + endMinute
                }
                var resultTime = endHour + ":" + endMinute
                this.tempMovieEndTime = resultTime;
            },
            selectMovieTime2 : function () {
                var holder = this.tempMovieTime2.split(":")
                var hour = Math.floor(this.movie_time/60)
                var minute = Math.floor(this.movie_time%60)

                var endHour = Math.floor(hour + parseInt(holder[0]))
                var endMinute = Math.floor(minute + parseInt(holder[1]))
                if( Math.floor(endMinute/60 >= 1) ) {
                    endMinute = Math.floor(endMinute % 60)
                    endHour += 1
                }
                if(endHour < 10) {
                    endHour = "0" + endHour
                }
                if(endMinute < 10) {
                    endMinute = "0" + endMinute
                }
                var resultTime = endHour + ":" + endMinute
                this.tempMovieEndTime2 = resultTime;
            },
            confirmScheduleType1 : function() {
                var params = new URLSearchParams();
                params.append('db', "");
                params.append('movie_id', this.selectMovieId.movie_id);
                params.append('cinema_id',vm1.selectCinemaID);
                params.append('ch_id',vm1.selectCinemaHallId);
                params.append('start_time',this.tempMovieTime);
                params.append('end_time',this.tempMovieEndTime);
                params.append('fs_date',this.tempDate);
                axios
                    .post('http://localhost:8788/customerbackend/schedulingMovieByExists', params)
                    .then(response => (
                        alert(response.data)
                        )
                    )
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            confirmScheduleType2 : function() {
                var formData = new FormData()
                formData.append('db','')
                formData.append('movie_name', this.movie_name )
                formData.append('movie_englishname',this.movie_englishname)
                formData.append('movie_act',this.movie_act)
                formData.append('movie_descr',this.movie_descr)
                formData.append('movie_detail',null)
                formData.append('movie_type',this.movie_type)
                formData.append('movie_country',this.movie_country)
                formData.append('movie_time',this.movie_time)
                formData.append('movie_date',this.movie_date)
                formData.append('movie_price',this.movie_price)
                formData.append('cinema_id',vm1.selectCinemaID)
                formData.append('ch_id',vm1.selectCinemaHallId)
                formData.append('start_time',this.tempMovieTime2)
                formData.append('end_time',this.tempMovieEndTime2)
                formData.append('fs_date',this.tempDate)
                formData.append('picture',this.upPicture)
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
                    }
                }
                axios.post('/customerbackend/schedulingMovie', formData, config).then(response => (
                        alert(response.data)
                    )
                ).catch(function (error) { // 请求失败处理
                    console.log(error);
                });
            },
            // 预览图片
            getFile(e){
                let _this = this
                var files = e.target.files[0]
                this.upPicture = files
                if (!e || !window.FileReader) return  // 看支持不支持FileReader
                let reader = new FileReader()
                reader.readAsDataURL(files) // 这里是最关键的一步，转换就在这里
                reader.onloadend = function () {
                    _this.src = this.result
                }
                console.log(files)
            }
        },
        mounted() {
            axios
                .get('http://localhost:8788/customerbackend/getAllMovie', {
                    params: { //请求参数
                        db: null
                    }
                })
                .then(response => (this.movies = response.data)
                )
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    });
</script>
</html>